<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
       <%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="my" uri="http://gson.cn/jsp/jstl/mytags" %>
        <%
           String path = request.getContextPath();
           String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <base href="<%= basePath%>">
   <link href="static/css/sp.css" rel="stylesheet" type="text/css">
  <title>商品详情</title>
  <link rel="icon" href="static/img/b2c_favicon.ico" type="image/x-icon">	
  <script src="static/js/jquery-1.9.1.min.js"></script>
  
 </head>

<body><div class="body">

		
		<div class="top-box">
				<img src="static/img/0d66fb8c-f7b0-4d2c-888c-51d56f67aeab_1.jpg" class="top-img"/>
				<img src="static/img/6bb4a0dd-a799-468c-8f84-ebeb5fce771a.jpg" class="top-img2"/>
				<ul class="ulone">
					<li>联想首页</li>
					<li>商城</li>
					<li>社区</li>
					<li>服务</li>
					<li>资讯</li>
					<li>门店</li>
					<li class="topimg">手机版<span class="ii"></span></li>
				</ul>
				<div class="qq"><img src="static/img/mmqrcode1515487661338.png"/></div>
		</div>
		<div class="two-box">
			<ul class="ultwo">
				<li>联想合伙人</li>
				<li>私人订制</li>
				<li>急速达</li>
				<li>积分兑换</li>
				<li>小新店铺</li>
				<li>学生专区</li>
				<li>商用专区</li>
			</ul>
			<div class="find">
				<input type="text" name="" placeholder="智能头盔" class="input-one">
				<span class="find-box"><span class="find-img"></span></span>
			</div>
			<c:if test="${empty use}">  
			<div class="Personal-img" onclick="shield()"></div>
		</c:if>
			
		<c:if test="${not empty use}">
			<div class="yetlogin"></div>
				<div class="ni" style="display:none;padding: 10px 5px;border: 1px solid #d3d3d3;width:130px;height:108px;float:right;position:absolute;left:1120px;top:75px;z-index:10001;background:white;'">
						<ul style="list-style:none;text-align:center;font-size: 14px;position: relative;cursor: pointer;height:38px;
    line-height: 38px;">
				<li><span>${use.get(0).uphone}</span></li>
				<li>我的商城</li>
				<li>退出登录</li>
			</ul>
		</div>
		</c:if>

			<div class="shop-img"></div>
		</div>
		<div class="shouye" style="margin-left:100px;">
			<a class="sy">首页</a><a class="sp"> >  商品详情 >  ${shop.gtradename} ${shop.gspbh1}</a>
		</div>		
<div class="magnifier" id="magnifier1">
		<div class="magnifier-container">
			<div class="images-cover"></div>
			<!--当前图片显示容器-->
			<div class="move-view"></div>
			<!--跟随鼠标移动的盒子-->
		</div>
		<div class="magnifier-assembly">
			<div class="magnifier-btn">
				<span class="magnifier-btn-left">&lt;</span>
				<span class="magnifier-btn-right">&gt;</span>
			</div>
			<!--按钮组-->
			<div class="magnifier-line">
				<ul class="clearfix animation03">
						<li>
							<div class="small-img">
								<img src="${shop.iway}" />
							</div>
						</li>
				</ul>
			</div>
		</div>
		<div class="magnifier-view"></div>
	</div>
</div><div class="bh"><a>商品编号： ${shop.gspbh1}</a><span>收藏</span></div>
	<div class="you">
	<div title="ThinkPad X1 tablet 平板笔记本 20JBA00H00" class="cp"> ${shop.gtradename} ${shop.gspbh1}</div>
	<div class="dec">${shop.gbewrite}</div>
	<%-- <ul>
			<c:forEach items="${ requestScope.list2}" var="m">
				<li>${m.atname}</li>
			</c:forEach>
	</ul> --%>
	<ul style="margin-top:20px;width:500px;font-size:18px;list-style:none;">
		<c:forEach items="${list2}" var="list2" >
			<li style="font-size:20px;margin-top:20px;">${list2.atname}</li>
			<c:forEach items="${map[list2.atname]}" var="attr">
					<li id="ji" tid="${attr.atid}" value="${attr.atid}" onclick="dian(${attr.atid})" class="dian s${attr.atid}" style="text-align:center;border-radius:5px;cursor: pointer;display: inline-block;border:solid 1px blue;width:290px;font-size: 14px;height:50px;line-height:50px;margin-top:10px;"><a>${attr.ashuxixng}</a></li>
			</c:forEach>
		</c:forEach>
		
	</ul>
	</div>
	<input type="hidden" value="${shop.gspbh1}" name="g_id"> 
	<input type="hidden" value="${attr[0].ashuxixng }" data-value="" name="chicun"/>
	<input type="hidden" value="${attr[1].ashuxixng }" name="xitong"/>
	<input type="hidden" value="${attr[2].ashuxixng }" name="peizhi"/>
		
		
			<script type="text/javascript">
				$(function(){
					//点击颜色把颜色值存入颜色的隐藏域
					$('.s1').click(function(){
						$(this).css("border","1px solid red");
						$('input[name=chicun]').val($(this).text());
						//location.href="shop_xq?chicun="+$(this).text()+"&xitong="+$('input[name=xitong]').val()+"&peizhi="+$('input[name=peizhi]').val();
					});
					//点击颜色把颜色值存入颜色的隐藏域
					$('.s2').click(function(){
						$(this).css("border","1px solid red");
						$('input[name=xitong]').val($(this).text());
						//location.href="shop_xq?xitong="+$(this).text()+"&chicun="+$('input[name=chicun]').val()+"&peizhi="+$('input[name=peizhi]').val();
					});
					//点击颜色把颜色值存入颜色的隐藏域
					$('.s3').click(function(){
						$(this).css("border","1px solid red");
						$('input[name=peizhi]').val($(this).text());
						//location.href="shop_xq?peizhi="+$(this).text()+"&xitong="+$('input[name=xitong]').val()+"&chicun="+$('input[name=chicun]').val();
					});
					
					//点击加入购物车
					$('.gwc').click(function(){
						//获取隐藏域的值
						var chicun = $('input[name=chicun]').val();
						var xitong = $('input[name=xitong]').val();
						var peizhi = $('input[name=peizhi]').val();
						
						var sum = $('input[name=sum]').val();


						//获得商品编号
						var g_id = $('input[name=g_id]').val();
						if(chicun=="" && xitong=="" && peizhi==""){
							alert("请选择配置");
						}else{
							//路径提交到处理购物车添加的servlet，参数
							location.href="shop_cart?g_id="+g_id+"&chicun="+chicun+"&xitong="+xitong+"&peizhi="+peizhi+"&sum="+sum;
						}
					});

					
				});
			</script>
	
	
	
		<script type="text/javascript">
			$(function(){
				/*  $('.dian').click(function(){
					$(".s").css({"border":"solid 1px red"});
					//$(this).siblings(".dian").css({"border":"solid 1px blue"});
				});  */
				function dian(){
					
				}
			});
			
	</script>
<div class="box1">
<a style="color:red" id="a3">商品详情</a>
<a id="a1">配置信息</a>
<a id="a2">商品评价</a>

</div>
	
		<div class="imgs">
				<img src="static/img/详情1.jpg" >
				<img src="static/img/详情2.jpg" >
				<img src="static/img/详情3.jpg" >
				<img src="static/img/详情4.jpg" >
				<img src="static/img/情5.jpg" >
				<img src="static/img/详情6.jpg" >
				<img src="static/img/详情7.jpg" >
				<img src="static/img/详情8.jpg" >
				<img src="static/img/详情9.jpg" >
				<img src="static/img/详情10.jpg" >
				<img src="static/img/详情11.jpg" >
				<img src="static/img/详情12.jpg" >
		</div>
<div class="think">
	    <a class="db" title="豆瓣" >豆瓣</a>
	    <a class="wb" title="微博" >微博</a>
	    <a class="rr" title="人人" >人人</a>
		<a class="tx" title="腾讯微博">腾讯微博</a>
</div>
<div class="link">
<a style="color:red">使用条款</a>  | <a>关于会员</a> |<a>服务与支持</a> |
<a style="color:red">官网意见反馈</a> |<a>隐私保护</a> |<a>联想商城</a> |
<a>神奇工场</a> |<a>合作伙伴认证</a> |<a>联系我们</a> |
<a>黒匠专属</a> |<a>经销商注册</a></div>
<div class="copy">
<p>版权所有：1998-2017 联想集团|<a> 法律公告<a> |<a> 京ICP备11035381 </a>
|京公网安备110108007970号| <a> 营业执照：110000410127232</a></p>
<p>超极本,赛扬、Celeron Inside、CoreInside、英特尔、英特尔标识、英特尔凌动、Intel Atom Inside、
英特尔酷睿、Intel Inside, Intel Inside 标识、英特尔欢跃、英特尔博锐、安腾、Itanium Inside、</p>
<p>奔腾、Pentium Inside、vPro Inside、至强、至强 Phi 和 Xeon Inside 均是英特尔公司在美国或其他国家的商标。ThinkPad是联想公司的注册商标。</p>
</div>
<div class="zz"></div>
<div class="buy">
<div class="ewm"><img src="static/img/ewm.jpg" ></div>
<div class="zx"><img src="static/img/goumaizixun.jpg"></div>
<div class="operate"> 
<span class="bg"></span>
<a>支持以旧换新，闲置笔记本回收</a>
</div>
<div class="right">
<span class="stock">有库存</span>
<input class="jian" type="button" value="-" style="height:25px;width:25px"> 
<input  type="text" class="txt" value="1" name="sum"/>
<input class="jia" type="button" value="+" style="height:25px;width:25px">
<span class="rmb">RMB</span> 
<span class="je">${shop.gprice}</span>
<div class="gm">
<button class="ljgm" title="立即购买">立即购买</button>
</div>
<button class="gwc" title="加入购物车"style=" margin-left:260px;height:40px;width:120px">加入购物车</button>
</div>
</div>
</div><div id="test"></div>
<div class="big-box">
	<div><a name="zzz"></a></div>
		<form  method="post" action="zhuc">
				<div id="zhuce">
					<div class="zhuce-title">
							<h1>欢迎注册联想会员</h1>
    						<div onclick="guan()" class="close"></div>
    				</div>
    				<div class="zhuce-input">
    					<p><lable>账号</lable><input class="account" id="n" name="uname" placeholder="请输入手机号"/></p>
    				</div>
    				<div class="enroll_inputaa ">
    					<p id="yi">请输入正确的格式</p>
    				</div>
    				<div class="enroll_inputb">
    					<p><lable>密码</lable><input type="password" name="pass" id="m" class="account" placeholder="密码长度8~20位,数字、字母、字符至少包含两种"/></p>
    				</div>
    				<div class="enroll_inputbb ">
    					<p id="er">密码长度不符合</p>
    				</div>
    				<div class="enroll_inputc">
    					<p><lable>确认密码</lable><input name="pass-t" id="t" type="password"class="account" ></p>
    				</div>
    				<div class="enroll_inputaa errorRepwd">
    					<p class="error" id="san">确认密码和密码不一致，请重新输入</p>
    				</div>
    				<div class="enroll_inputd">
    					<p><lable>验证码</lable><input type="text" class="captcha_code" name="yz" id="y"placeholder="请输入验证码"></p>
    					<img id="yzm" src="getcaptcha" onclick="changeImg();return false;" class="yanzhengma"><span class="huan" onclick="changeImg();return false;" >换一张</span>
    				</div>
    				<div class="enroll_inputaa">
    					<p>验证码错误</p>
    				</div>
    				  <div class="enroll_inputd">
    					<p><lable>手机验证码</lable><input type="text" class="captcha_code"></p><button class="mobile_captcha" style="margin-left:3px;width: 120px; background: #c2c2c2;border: none;    height: 28px;cursor: poiner;">获取手机验证码</button>
    				</div>
    				<div class="enroll_inputaa"></div>
    				<div class="enroll_main">
    					<lable>
    						<input type="checkbox" class="chk"/>
    						<p>同意联想的<a>使用条款</a>和<a>隐私权政策</a></p>	
    					</lable>
    				<div class="enroll_btn">
    						  <input type="submit" id="subb" class="ljzc" value="立即注册"/>
    				</div>
    				</div>
				</div>
			</form>
			<div id="denglu">
					<div class="login">
						<div class="now">普通登录</div>
						<div class="nows">快捷登录</div>
						<div onclick="cancel_shield()" class="close"></div>
					</div>
					<div class="login-input">
						<div class="use">
							<img src="static/img/icon03.jpg" class="input-img"/>
							<input type="text" name="uuname" class="name1" placeholder="请输入手机号或邮箱"/>
						</div>
					</div>
					<div class="login-inputb">
						<div class="pwd">
							<img src="static/img/icon04.jpg" class="input-img"/>
							<input type="password" name="uupwd" class="name1" placeholder="密码"/>
						</div>
					</div>

					<div class="login-main">

					</div>
					<div class="zidong">
						<input type="checkbox" name="" class="persistent"><p>自动登录</p>
					</div>
					<div class="login-btn">
						<input type="button" id="sub" value="登录" style="width:330px;height:30px;background:#ef1c22;border:none;color:white;border-radius:7px;
						"/>
					</div>
					<div class="login-zhu">
						<p>
							<a class="zhuc" onclick="zhu()">立即注册</a>
							<a class="mima">忘记密码</a>
						</p>
					</div>
					<div class="cooperation">
						使用合作网站账号登录:
						<div class="cooperation_items">
							<a>
								<img src="static/img/ico_qq.png"/>
								<img src="static/img/ico_wc.png"/>
								<img src="static/img/ico_sina.png"/>
								<img src="static/img/ico_zfb.png"/>
							</a>
						</div>
					</div>
			
			</div>	</body>
</html>
<script src="static/js/slide.js" type="text/javascript"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="static/js/magnifier.js"></script>
<script>

$(function(){ //这里是加减按钮都启用的情况  
	 $(".big1").click(function(){
				$(this).css("border","1px red solid");
				$(this).siblings().css("border"," 1px solid #b4b4b4");
			});

	 $(".box1 a").click(function(){
				$(this).css("color","red");
				$(this).siblings().css("color","#000000");
			});
    var t = $(".txt"); 
    $(".jia").click(function(){       
        t.val(parseInt(t.val())+1)
        setTotal();  
    })  
    $(".jian").click(function(){  
        if(t.val()>1){  
        t.val(parseInt(t.val())-1);  
        }  
        else{  
        alert("至少购买一件哦！");  
        }  
        setTotal();  
    })  
});  

 $(function() {
	var magnifierConfig = {
		magnifier : "#magnifier1",
		width : 500,
		height : 500,
		moveWidth : null,
		zoom : 5
	};
	var _magnifier = magnifier(magnifierConfig);
	
		$("#a1").click(function(){
		$(".imgs").empty();
		$(".imgs").load("/jsps/pzxx.jsp");  
		});

		$("#a2").click(function(){
		$(".imgs").empty();
		$(".imgs").load("/jsps/sppj.jsp")  
		});

		$("#a3").click(function(){
		$(".imgs").empty();
		$(".imgs").load("/jsps/sptp.jsp")  
		});
});
 //顶部图片下拉
	$('.ii').hover(
	function(){
		$('.qq img').slideToggle();
	});

	//登录框
	function shield(){
	    var s = document.getElementById("test");
	    s.style.display = "block";
	    var l = document.getElementById("denglu");
	    l.style.display = "block";
	}
	function cancel_shield(){
	    var s = document.getElementById("denglu");
	    s.style.display = "none";
	    
	    var l = document.getElementById("test");
	    l.style.display = "none";
	}
	function zhu(){
	    var z = document.getElementById("zhuce");
	    z.style.display="block";
	    var l = document.getElementById("test");
	    l.style.display = "block";
	    var s = document.getElementById("denglu");
	    s.style.display = "none";
	}
	function guan(){
	    var q = document.getElementById("zhuce");
	    q.style.display="none";
	    var l = document.getElementById("test");
	    l.style.display = "none";
	    var s = document.getElementById("denglu");
	    s.style.display = "none";
	}
	$('.nows').click(function(){
		$('#denglu').empty();
		$('#denglu').load("jsps/shortcut.jsp");
	});	
	//点击更换图形验证码
	function changeImg(){
		var imgs = document.getElementById('yzm');
		imgs.src = "getcaptcha?temp="+new Date().getTime().toString();
	}
	$('y').blur(function(){
		if('regist'){
			
		}
	});
	$('input[name=yz]').blur(function(){
		//ajax访问后台
		$.get("regist",{yz:$(this).val()},
			function(data){
				//把错误信息回显到页面
				$('.errors').text(data);
				$('.enroll_inputaa').css({"display":"block"});
		});
	});
	
	//滚动滚动条出现
	window.onscroll = function(){ 
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  //侧边悬浮条
  //顶部联想log
  var top_img = document.querySelector(".top-img");
  var top_img2 = document.querySelector(".top-img2");
  if(t>20){
	top_img.style.display="none";
	top_img2.style.display="block";
	}else{
	top_img.style.display="block";
	top_img2.style.display="none";
	}
} 
	 $(function(){	
			$('#n').blur(function(){
		 	if($("#n").val().length !=11 ||isNaN($('#n').val())){
					 $('#yi').css({"display":"block"});
				 }else if($("#n").val().length ==11){
					 $('#yi').css({"display":"none"});
				 }
			});
			$('#m').blur(function(){
		 	if($('#m').val().length>16 ||$('#m').val().length<6){
				 $('#er').css({"display":"block"});
		 		}else if($('#m').val().length<=16||$('#m').val().length==0){
		 			 $('#er').css({"display":"none"});
		 		}
			});
			$('#t').blur(function(){
				if($('#t').val()!=$('#m').val()){
				 $('#san').css({"display":"block"});
				}else if($('#t').val()==$('#m').val())  {
				 $('#san').css({"display":"none"});

				}
				
			});
			$('y').blur(function(){
				if('regist'){
					
				}
			});
			$('input[name=yz]').blur(function(){
				//ajax访问后台
				$.get("regist",{yz:$(this).val()},
					function(data){
						//把错误信息回显到页面
						$('.errors').text(data);
						$('.enroll_inputaa').css({"display":"block"});
				});
			});
			
		 });
			//点击更换图形验证码
		function changeImg(){
			var imgs = document.getElementById('yzm');
			imgs.src = "getcaptcha?temp="+new Date().getTime().toString();
		}

		$(function(){
			$('#sub').click(function(){
				$.post("dengl",{
					"uuname":$("input[name='uuname']").val(),"uupwd":$("input[name='uupwd']").val()		
				},function(data){
					if(data=='okk'){
						 window.location.href="pagelist"; 
					}else{	
						alert('账号或密码错误');
					}
				});
			});
			
		});

		$(function(){
			$('#subb').click(function(){
				$.post("zhuc",{
					"uname":$("input[name='uname']").val(),"pass":$("input[name='pass']").val(),"pass-t":$("input[name='pass-t']").val()
				},function(zz){
					if(zz=='ok'){
						 window.location.href="pagelist"; 
					}else if(zz=='two'){
						alert('账号和密码为空');
					}else if(zz='chang'){
						alert('手机号长度不符合！');
					}
				});
				
			});
			$('.yetlogin,.ni').hover(function(){
				$('.ni').slideToggle();
			});
		});
	
</script> 
</body>
</html>

